<template>
  <el-dialog title="会员充值" :visible.sync="dialogFormVisible" width="30%" v-loading="loading">
    <el-form :model="form" ref="myform" :rules="rules">
      <el-form-item label="充值余额" prop="amount">
        <el-input v-model="form.amount" @blur="setDw" style="width: 244px"></el-input>
      </el-form-item>
      <el-form-item label="赠送红包" v-if="form.amount">
        <div class="redPack" v-if="couponeList.length">
          <p v-for="(item, index) in couponeList" :key="index">
            {{ item.couponName }}--{{ item.amount }}元 *
            {{ item.couponCount }}
          </p>
        </div>
        <div class="redPack" v-else>
          <p>无赠送红包</p>
        </div>
      </el-form-item>
      <el-form-item label="支付方式" prop="payType">
        <el-select v-model="form.payType">
          <el-option label="支付宝" value="1"></el-option>
          <el-option label="微信" value="2"></el-option>
          <el-option label="银联" value="3"></el-option>
          <el-option label="现金" value="5"></el-option>
        </el-select>
      </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button @click="dialogFormVisible = false">取 消</el-button>
      <el-button :type="state ? 'primary' : 'info'" @click="submit">确 定</el-button>
    </div>
    <!-- <el-dialog width="30%" title="请确认充值金额" :visible.sync="innerVisible" append-to-body>
      <div style="">
        <h3
          style="font-weight: bold;color: red;font-size: 60px;line-height: 1;margin: 0;text-align: center;display: block;">
          {{ form.amount }}</h3>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button @click="innerVisible = false">取 消</el-button>
        <el-button :type="state ? 'primary' : 'info'" @click="submitConfirm">确 定</el-button>
      </div>

    </el-dialog> -->
  </el-dialog>
</template>
<script>

import { balanceAdd, rechargePageList } from '@/config/api'
import { times, divide } from "@/utils/tools"

export default {

  data() {
    var amountvali = (rule, value, callback) => {
      if (value >= 100000) {
        return callback(new Error('充值金额不能超过10万'));
      }
      callback();

    }
    return {
      dialogFormVisible: false,
      form: {
        amount: undefined,
        memberId: undefined,
        memberCardId: undefined,
        rechargePositionId: 0,
        payType: undefined
      },
      innerVisible: false,
      couponeList: [],
      state: false,
      loading: false,
      rules: {
        amount: [
          { required: true, message: '请输入充值余额', trigger: 'blur' },
          { validator: amountvali, trigger: 'blur' }

        ],
        payType: [
          { required: true, message: '请选择支付方式', trigger: 'change' }],

      }
    };
  },

  methods: {
    show(record) {


      this.form = {
        amount: undefined,
        memberId: undefined,
        memberCardId: undefined,
        rechargePositionId: 0,
        payType: undefined
      }
      this.couponeList = []

      this.getDw()
      this.form.memberId = record.platformMemberId
      this.form.memberCardId = record.platformMemberCardId
      this.dialogFormVisible = true
    },
    getDw() {
      rechargePageList().then(res => {
        res.data.result.list.map(item => {
          item.couponMapList.map(item => {
            item.amount = divide(item.amount, 100)
          })
          item.positionValue = divide(item.positionValue, 100)
          // item.couponDTOList.map(item => {
          //   item.preAmount = divide(item.preAmount, 100)
          // })
        })
        this.dwList = res.data.result.list.sort(this.sortPositionValue)
        console.log(this.dwList)
      })
    },
    setDw() {
      console.log(this.form.amount)
      if (this.form.amount) {
        let dw = null
        let state = true
        for (let i = 0; i < this.dwList.length; i++) {
          if (this.dwList[i].positionValue > this.form.amount) {
            if (i == 0) {
              state = false
            } else {
              dw = this.dwList[i - 1]
            }

            break
          }
        }
        console.log(state)
        if (!state) {
          this.couponeList = []
          this.state = true
          this.form.rechargePositionId = 0
          return false;
        }
        if (!dw) {

          dw = this.dwList[this.dwList.length - 1]
        }
        console.log(dw)

        this.couponeList = dw.couponMapList
        this.form.rechargePositionId = dw.id;
        this.state = true

      }

    },
    sortPositionValue(a, b) {
      return a.positionValue - b.positionValue;
    },
    // submitConfirm(){
    //   try {
    //           this.loading = true
    //           let params = JSON.parse(JSON.stringify(this.form))
    //           params.amount = times(params.amount, 100)
    //           params.sysUserId = this.$store.state.login.userInfo.id
    //           balanceAdd(params).then(res => {
    //             if (res.data.status == 200) {
    //               this.dialogFormVisible = false
    //               this.innerVisible = false
    //               this.$parent.getData();
    //               this.$message({
    //                 type: 'success',
    //                 message: '操作成功!'
    //               });

    //             }
    //             this.loading = false
    //           })
    //         } catch (error) {
    //           this.loading = false
    //         }
    // },
    submit() {

      this.$refs['myform'].validate((valid) => {

        if (valid) {
          this.innerVisible = true
          this.$confirm('此操作将进行余额充值, 是否继续?', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }).then(() => {
            try {
              this.loading = true
              let params = JSON.parse(JSON.stringify(this.form))
              params.amount = times(params.amount, 100)
              params.sysUserId = this.$store.state.login.userInfo.id
              balanceAdd(params).then(res => {
                if (res.data.status == 200) {
                  this.dialogFormVisible = false
                  this.innerVisible = false
                  this.$parent.getData();
                  this.$message({
                    type: 'success',
                    message: '操作成功!'
                  });

                }
                this.loading = false
              })
            } catch (error) {
              this.loading = false
            }

          }).catch(() => {
            this.$message({
              type: 'info',
              message: '已取消删除'
            });
          });

        } else {
          console.log('error submit!!');
          return false;
        }
      });

    }

  }
};
</script>
<style lang="scss">
.redPack {
  display: flex;
  flex-wrap: wrap;

  p {
    margin-right: 20px;
  }
}
</style>